<!DOCTYPE html>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>GraphicsLayer类</title>
     <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css"/>
   <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
     <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
</head>
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      #controls {
        background: #fff;
        box-shadow: 0 6px 6px -6px #999;
        color: #444;
        font-family: sans-serif;
        height: auto;
        left: 1em;
        padding: 1em;
        position: absolute;
        top: 1em;
        width: auto;
        z-index: 40;
      }
      #controls div {
        padding: 0 0 1em 0;
      }
    </style>

 <script type="text/javascript">
  var map ;
  var graphicsLayer;
  require([
    "esri/map","esri/geometry/Circle","esri/symbols/SimpleFillSymbol",
    "esri/graphic","esri/layers/GraphicsLayer",
    "dojo/dom","dojo/dom-attr","dojo/domReady!"
    ],function(
 	          Map, Circle, SimpleFillSymbol,
 	          Graphic, GraphicsLayer,
 	          dom, domAttr	   
    ){
	  map = new Map('arcgisDiv',{
		  basemap:'streets',
		  center:[-120.741, 56.39],
		  slider:false,
		  zoom:6
	  });
	  var symbol = new SimpleFillSymbol().setColor(null).outline.setColor('green');
	    graphicsLayer = new GraphicsLayer({id : 'cirles'});
	  var geodesic = dom.byId('geodesic');//这里用dojo。byId...
	  map.addLayer(graphicsLayer);
	  map.on('click',function(e){
		var radius = map.extent.getWidth()/10;
		var circle = new Circle({
			center : e.mapPoint,
			geodesic : domAttr.get(geodesic,'checked'),
			radius : radius
		});
		var graphic = new Graphic(circle,symbol);
		graphicsLayer.add(graphic)
	  })
	  
	  dojo.connect(dojo.byId('test'), "onclick", zoomfuwei);
	  // dojo.connect(dojo.byId('arcgisDiv'), "click", zoomfuwei);
	   function zoomfuwei(){
	 	  alert(90)
	 	  graphicsLayer.clear();
	   } 
  });
 

 
  
/*
   dojo.require('esri.map');
  dojo.require('esri.geometry.Extent');
  var myMap ;
  
  function init(){
	  	var url ="http://map.geoq.cn/ArcGIS/rest/services/SimpleFeature/ChinaBoundaryLine/MapServer"; 
	    var initialExtent = new esri.geometry.Extent({
		   "xmin":6971056.979606233,
           "xmax":16363639.015286192,
           "ymin":1932328.0750486827,
           "ymax":7152059.8625854105,
           "spatialReference":
           {"wkid":102100}
		  });
		  myMap = new esri.Map('arcgisDiv',{ 
			  //center : [-98, 40] , 不能与extent同时存在
		  extent:initialExtent
			  });

     // var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
      var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
      myMap.addLayer(myTiledMapServiceLayer);
	   // myMap.setZoom(12);

	 myMap.setExtent(extent1);//设置显示的位置
	   var resizeTimer;
       dojo.connect(myMap, 'onLoad', function(theMap) {
         dojo.connect(dijit.byId('arcgisDiv'), 'resize', function() {
           clearTimeout(resizeTimer);
           resizeTimer = setTimeout(function() {
        	   myMap.resize();
        	   myMap.reposition();
            }, 500);
          });
        });
	   
  }

  
  dojo.addOnLoad(init);
  
  dojo.connect(dojo.byId('test'), "onclick", zoomfuwei);
  dojo.connect(dojo.byId('arcgisDiv'), "click", zoomfuwei);
  function zoomfuwei(){
	  //alert(9090)
	 // myMap.responsition();
	  // myMap.setVisibility(false);
  } 
 
 
 */
      </script>
      <body class="tundra">
       <div id="arcgisDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
      <div id="controls">
      <div>Click the map.</div>
      <input type="checkbox" id="geodesic">
      <label for="geodesic">Geodesic?</label>
    </div>
       <button id="test">测试复位</button>
      </body>
  </html>